<!DOCTYPE html>
<!-- 这是文档类型声明，告诉浏览器当前文档是HTML5类型 -->
<html lang="en">
<!-- html标签是HTML页面的根标签，lang属性用于定义页面语言，这里设置为英文，也可以根据实际情况设为"zh-CN"等表示中文 -->

<head>
    <!-- head标签用于存放页面的元信息，比如标题、样式表、脚本等，这些内容一般不会直接显示在页面上 -->
    <meta charset="UTF-8">
    <!-- meta标签用于设置页面的字符编码，这里设置为UTF-8，能很好地支持多种字符显示 -->
    <title>我的第一个HTML页面</title>
    <!-- title标签定义了页面在浏览器标题栏显示的标题 -->
    <style>
        /* 选择页面中的img标签 */
        img {
            /* 设置图片的过渡效果，这里表示所有属性变化都应用0.3秒的过渡时间，过渡效果会让图片放大的过程更平滑自然 */
            transition: all 0.3s;
        }
        /* 当鼠标悬停在img标签（图片）上时应用以下样式 */
        img:hover {
            /* 使用transform属性的scale函数来放大图片，1.2表示放大到原来的1.2倍 */
            transform: scale(1.2);
        }
        /* 选择body标签，用来设置整个页面显示区域的背景颜色 */
        body {
            /* 设置背景颜色为灰色，这里使用十六进制颜色值#ccc来表示一种常见的灰色 */
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <!-- body标签内的内容是会在浏览器中实际展示出来的部分 -->
    <h1>欢迎来到我的HTML学习页面</h1>
    <!-- h1标签用于定义一级标题，通常是页面中最重要、最突出的标题，还有h2、h3等以此类推表示不同级别的标题 -->
    <p>这是一段简单的段落文字，用于展示文本内容。</p>
    <!-- p标签用于定义段落，会自动在段落前后添加一些空白间距，让文本排版更清晰 -->
    <a href="https://www.hpu.edu.cn">点击这里访问示例网站</a>
    <!-- a标签是超链接标签，href属性指定了链接的目标地址，这里链接到一个示例网站 -->
    <img src="1.jpg" alt="示例图片">
    <!-- img标签用于在页面中插入图片，src属性指定图片的来源路径，alt属性是当图片无法正常显示时显示的替代文字 -->
</body>

</html>